<template>
  <div class="infinite-container">
    <mu-list class="bgwhite">
      <mu-list-item :title="user.username">
        <mu-avatar src="../assets/logo.png" slot="leftAvatar"></mu-avatar>
        <mu-raised-button label="解绑" slot="right" secondary></mu-raised-button>
      </mu-list-item>
    </mu-list>
  
    <mu-list class="bgwhite mt10">
      <mu-list-item title="*国籍">
        <mu-select-field v-model="form.country" slot="right" :underlineShow="false" class="mt15" style="width:120px;">
          <mu-menu-item :value="1" title="中国大陆"></mu-menu-item>
          <mu-menu-item :value="2" title="中国港澳" disabled></mu-menu-item>
          <mu-menu-item :value="3" title="中国台湾" disabled></mu-menu-item>
          <mu-menu-item :value="4" title="海外同胞" disabled></mu-menu-item>
        </mu-select-field>
      </mu-list-item>
       <mu-list-item title="*职业">
        <mu-select-field v-model="form.job" slot="right" :underlineShow="false" class="mt15" style="width:120px;">
          <mu-menu-item :value="0" title="请选择"></mu-menu-item>
          <mu-menu-item :value="1" title="工人"></mu-menu-item>
          <mu-menu-item :value="2" title="农民"></mu-menu-item>
          <mu-menu-item :value="3" title="军人"></mu-menu-item>
          <mu-menu-item :value="4" title="学生"></mu-menu-item>
          <mu-menu-item :value="5" title="非就业者"></mu-menu-item>
          <mu-menu-item :value="6" title="教师"></mu-menu-item>
          <mu-menu-item :value="7" title="行政业务"></mu-menu-item>
          <mu-menu-item :value="8" title="商务服务"></mu-menu-item>
          <mu-menu-item :value="9" title="工程技术"></mu-menu-item>
          <mu-menu-item :value="10" title="社科文"></mu-menu-item>
          <mu-menu-item :value="11" title="农林渔牧"></mu-menu-item>
          <mu-menu-item :value="12" title="公务人员"></mu-menu-item>
          <mu-menu-item :value="13" title="其他就业"></mu-menu-item>
          <mu-menu-item :value="14" title="产业工人"></mu-menu-item>
        </mu-select-field>
      </mu-list-item>
      <mu-list-item title="*性别">
        <div slot="right">
          <mu-radio name="sexGroup" v-model="form.sex" label="男" nativeValue="1"></mu-radio>
          <mu-radio name="sexGroup" v-model="form.sex" label="女" nativeValue="2"></mu-radio>
        </div>
      </mu-list-item>
      <mu-list-item title="*证件类型">
        <mu-select-field v-model="form.cardType" slot="right" :underlineShow="false" class="mt15" style="width:120px;">
          <mu-menu-item :value="1" title="身份证"></mu-menu-item>
          <mu-menu-item :value="2" title="护照" disabled></mu-menu-item>
          <mu-menu-item :value="3" title="港澳通行证" disabled></mu-menu-item>
          <mu-menu-item :value="4" title="台湾通行证" disabled></mu-menu-item>
        </mu-select-field>
      </mu-list-item>
      <mu-list-item title="*证件号码">
        <mu-text-field v-model="form.cardNumber" slot="right" class="mt15" >
        </mu-text-field>
      </mu-list-item>
  
      <mu-list-item title="*姓名">
        <mu-text-field v-model="form.realName" slot="right" class="mt15" >
        </mu-text-field>
      </mu-list-item>
      <mu-list-item title="监护人姓名">
        <mu-text-field v-model="form.parentName" slot="right" class="mt15" >
        </mu-text-field>
      </mu-list-item>
      <mu-list-item title="监护人证件">
        <mu-text-field v-model="form.parentNumber" slot="right" class="mt15" >
        </mu-text-field>
      </mu-list-item>
      <mu-list-item title="*联系地址">
        <mu-text-field v-model="form.address" slot="right" class="mt15" >
        </mu-text-field>
      </mu-list-item>
      
      <mu-list-item title="*出生日期">
        <mu-text-field v-model="bornDate" slot="right" class="mt15" hintText="根据身份证自动计算">
        </mu-text-field>
      </mu-list-item>
      <mu-list-item title="*手机号码">
       <div slot="right" class="text-center">{{user.username}}</div>
      </mu-list-item>

      <mu-list-item>
       <mu-raised-button @click="submitForm" label="完善信息" fullWidth primary></mu-raised-button>
      </mu-list-item>
    
      <section class="grey">
        提示：所有信息完善后无法修改，为了保证预约挂号等功能正常使用，请务必填写真实资料
      </section>
  
    </mu-list>
    <mu-snackbar  v-if="toast.show" :message="toast.message" ></mu-snackbar >
  </div>
</template>

<script>
import {getBirthdayFromIdCard, testCardNumber, testEmpty} from '../common/js/util.js'

export default {
  name: 'message',
  data () {
    return {
      user: JSON.parse(localStorage.user),
      form: {
        country: 1,
        cardType: 1,
        cardNumber: '',
        job: 0,
        realName: '',
        parentName: '',
        parentNumber: '',
        address: '',
        sex: '1'
      },
      toast: {
        show: false,
        message: ''
      }
    }
  },
  computed: {
    // 根据身份证自动计算出生日期
    'bornDate' () {
      return getBirthdayFromIdCard(this.form.cardNumber)
    }
  },
  mounted () {
    this.$store.commit('UPDATE_TITLE', '完善用户信息')
  },
  destroyed () {
    this.$store.commit('UPDATE_TITLE')
  },
  methods: {
    submitForm () {
      if (!testCardNumber(this.form.cardNumber)) {
        this.toastFn('证件号码格式错误')
        return false
      }

      if (this.form.job === 0) {
        this.toastFn('请选择职业')
        return false
      }

      if (testEmpty(this.form.realName) || testEmpty(this.form.address)) {
        this.toastFn('请填写完整信息')
        return false
      }
      // xhr start
      localStorage.improveUserInfo = true
      this.toastFn('保存成功')
    },
    toastFn (message) {
      this.toast = {
        message: message,
        show: true
      }
      this.toastTimer && clearTimeout(this.toastTimer)
      this.toastTimer = setTimeout(() => { this.toast.show = false }, 2000)
    }
  }
}
</script>
<style lang="less">
.mu-item-right {
  width: auto!important;
}
.grey {
  color: #999;
  padding: 0 20px;
}
.mt15 {
  .mu-text-field-input {
    text-align: right;
  }
}
</style>

